<!--  -->
<template   >
  <el-card :span="8" v-bind="disPlayDataItem.otherOPtions">
    <div class="grid-content" :class="disPlayDataItem.color">
      <i class="grid-con-icon" :class="disPlayDataItem.icon"></i>
      <div class="grid-cont-right">
        <div class="grid-num">
          <count-up v-if="disPlayDataItem"  :start-val="0" :end-val="disPlayDataItem.count" />
        </div>
        <div class="title">{{ disPlayDataItem.title }}</div>
      </div>
    </div>
  </el-card>

</template>

<script>

</script>
<script setup lang='ts' >
import { PropType} from 'vue'
import { IDisPlayData } from "../types.ts"
import CountUp from 'vue-countup-v3'
const props = defineProps({
  disPlayDataItem: {
    type: Object as PropType<IDisPlayData>,
    required: true
  }
})






</script>
<style lang='less' scoped>
.grid-content {
  display: flex;
  align-items: center;
  height: 100px;
}

.grid-cont-right {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #999;
}

.grid-num {
  font-size: 30px;
  font-weight: bold;
}

.grid-con-icon {
  font-size: 50px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
}

.grid-con-1 .grid-con-icon {
  background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
  background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
  background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
  color: rgb(242, 94, 67);
}

.title {
  margin-top: 10px;
}
</style>
